<template>
	<view class="head-box">
		<my-title :height="height" :bgColor="bgColor">
			<template v-slot:left>
				<view class="left-loading">
					<hevh-loading :backgroundColor="backgroundColor" :size="loadingSize" :type="loadingType"
						:textSize="textSize" :loadingning="loadingning"></hevh-loading>
				</view>
			</template>

			<template v-slot:center>
				<view class="center-title">
					<text>消息</text>
				</view>
			</template>


			<template v-slot:right>
				<view class="right-img">
					<view class="sys-img">
						<view class="img">
							<image class="img-search" :src="noticeImg" @click="gotoMsgNotice">
							</image>
						</view>
						<view class="img">
							<image :src="addImg" @click="gotoContact"></image>
						</view>
					</view>
					<view class="sys-num" v-if="sysNum > 0">{{sysNum}}</view>
				</view>
			</template>
		</my-title>
	</view>
</template>

<script>
	//导入公共组件
	import myTitle from '@/components/common/my-title/my-title.vue'
	import hevhLoading from './home-loading.vue';

	export default {
		props: ['sysNum','loadingning'],
		components: {
			myTitle,
			hevhLoading
		},
		data() {
			return {
				height: '45',
				noticeImg: require('@/static/img/msg/home/notice.svg'),
				addImg: require('@/static/img/msg/home/add.svg'),
				bgColor: '#EDEDED',

				//loadingning: true,
				textSize: 22,
				loadingType: 'loading12',
				loadingSize: 50,
				backgroundColor: '#EDEDED'
			}
		},
		methods: {
			gotoMsgNotice() {
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}

				uni.navigateTo({
					url: '/pages/msg/msg-notice/msg-notice'
				})
			},
			gotoContact() {
				this.$isLoginByVisitor()
				if (!uni.getStorageSync('isVisitorLogin')) {
					return
				}

				uni.navigateTo({
					url: '/pages/msg/contact/contact'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		width: 100%;
		// border-bottom: solid 1rpx #eee;
	}

	.left-loading {
		width: 100%;
		height: 45px;
	}

	.center-title {
		text-align: center;
		line-height: 45px;

		text {
			font-size: 32rpx;
			font-weight: 550;
		}
	}

	.right-img {
		position: relative;
	}

	.sys-img {
		position: absolute;
		display: flex;
		left: 50%;
		top: -50%;
		transform: translate(-50%, 50%);

		.img {
			width: 35px;
			text-align: center;

			image {
				// margin-top: 14.5px;
				width: 20px;
				height: 20px;
			}
		}
	}

	.sys-num {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		line-height: 36rpx;
		background-color: red;
		border-radius: 50%;
		left: 43%;
		top: 5px;
		transform: translate(-50%);
		font-size: 18rpx;
		text-align: center;
		color: #fff;
	}
</style>